<template>
    <div class="hunter-home" :class="{'no-event':changepointer}">

        <div class="hhome-module" v-for="p in arrayTwo">
            <div class="module-title">
                <h2>{{p.title}}</h2>
                <router-link :to="{path:'/getmore',query:{city_name:currCity}}">更多</router-link>
            </div>
            <div class="module-main">
                <ProductView class="product-list">
                    <router-link 
                        :to="{path:'/hunter/proinfo',query:{_id:h.product_id}}" class="a-box" 
                        v-for="h in p.items"
                    >
                        <div class="product-item">
                            <div class="item-pic">
                                <img :src="h.title_page">
                                <div class="sellout" v-show="!h.can_sell">
                                    <img src="static/img/sellout.png">
                                </div>
                            </div>
                            <p class="item-text">{{h.title}}</p>
                            <div class="info">
                                <p>￥{{h.price}}</p>
                                <div class="rating">
                                    <img src="static/img/star.png" v-for="n in h.score">
                                </div>
                            </div>
                        </div>
                    </router-link>
                </ProductView>
            </div>
        </div>

        <div class="swiper">
            <Swiper :list="thirdList"></Swiper>
        </div>

        <div class="hhome-module" v-for="p in forth">
            <div class="module-title">
                <h2>{{p.title}}</h2>
                <router-link to="/getmore">更多</router-link>
            </div>
            <div class="module-main">
                <ProductView class="product-list">
                    <router-link to="/getmore" class="a-box" v-for="h in p.items">
                        <div class="product-item product-item2">
                            <div class="item-pic">
                                <img :src="h.cover" class="hot-img">
                            </div>
                            <p class="item-text hot-city">{{h.name}}</p>
                        </div>
                    </router-link>
                </ProductView>
            </div>
        </div>

        <div class="hhome-module" v-for="p in arrayforth">
            <div class="module-title">
                <h2>{{p.title}}</h2>
                <router-link to="/getmore">更多</router-link>
            </div>
            <div class="module-main">
                <ProductView>
                    <router-link to="/getmore" class="a-box" v-for="h in p.items">
                        <div class="product-item">
                            <div class="item-pic">
                                <img :src="h.title_page">
                                <div class="sellout" v-show="!h.can_sell">
                                    <img src="static/img/sellout.png">
                                </div>
                            </div>
                            <p class="item-text">{{h.title}}</p>
                            <div class="info">
                                <p>￥{{h.price}}</p>
                                <div class="rating">
                                    <img src="static/img/star.png" v-for="n in h.score">
                                </div>
                            </div>
                        </div>
                    </router-link>
                </ProductView>
            </div>
        </div>

        <div class="hhome-module" v-for="p in lastsecond">
            <div class="module-title">
                <h2>{{p.title}}</h2>
                <router-link></router-link>
            </div>
            <div class="module-main">
                <ProductView>
                    <router-link to="" class="a-box" v-for="h in p.items">
                        <div class="hunter-item">
                            <div class="hunter-pic">
                                <img :src="h.avatar_l">
                            </div>
                            <span class="hunter-text">
                                <h4>{{h.name}}</h4>
                                <p>{{h.profession}}</p>
                            </span>
                            <p class="hunter-desc">{{h.comment_text}}</p>
                        </div>
                    </router-link>
                </ProductView>
            </div>
        </div>

        <div class="hhome-module" v-for="p in lastone">
            <div class="module-title">
                <h2>{{p.title}}</h2>
                <router-link to="/getmore">更多</router-link>
            </div>
            <div class="tiyan-main">
                <div class="tiyan-item" v-for="t in p.items">
                    <div class="tiyan-left">
                        <div class="tiyan-avatar">
                            <img :src="t.user.avatar_s">
                        </div>
                        <div class="tiyan-text">
                            <p>{{t.user.name}}</p>
                            <p>{{t.text}}</p>
                        </div>
                    </div>
                    <div class="tiyan-img">
                        <img :src="t.cover_image">
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {
        Swiper
    } from 'vux';
    import Hloading from '../../components/Hloading.vue';
    import ProductView from '../../components/ProductView.vue';
    import {
        mapState
    } from 'vuex';
    export default {
        components: {
            ProductView,
            Swiper,
            Hloading,
        },

        mounted: function() {
            var params = {
                city_name: this.currCity
            }
            // console.dir(params);
            
            this.$store.dispatch("requestHhomedata", params)
                .then(res => {
                    var arr = res.data.data.elements;
                     arr.forEach(function(e) {
                        e.items.forEach(i=>{
                            if(i.score==null){
                                i.score = 0;
                            }else{
                                i.score = Math.floor(i.score);
                            }
                        })
                    }, this);
                    this.$store.commit("setHhomedata",arr);
                    this.$store.commit("setIsLoading",false);
                    // console.log(new Date().getTime());
                });
        },
        computed: {
            arrayTwo: function() {
                return this.hhomedata.slice(0, 2);
            },
            // 轮播图
            third: function() {
                return this.hhomedata.slice(2, 3);
            },
            thirdList: function() {
                return [{
                    img: this.third[0].items[0].img_url
                }, {
                    img: this.third[0].items[1].img_url
                }, ]
            },
            // 热门面包圈
            forth: function() {
                return this.hhomedata.slice(3, 4);
            },
            arrayforth: function() {
                return this.hhomedata.slice(4, this.hhomedata.length - 2);
            },
            // 明星猎人
            lastsecond:function(){
                return this.hhomedata.slice(this.hhomedata.length - 2,this.hhomedata.length - 1);
            },
            // 体验故事
            lastone:function(){
                return [this.hhomedata[this.hhomedata.length-1]];
            },

            ...mapState([
                "hhomedata",
                "isShowAllc",
                "changepointer",
                "currCity",
                "isLoading"
            ])
        }
    }
</script>

<style scoped>
    .hunter-home {
        padding-top: 28px;
        width: 100vw;
        height: calc(100vh - 44px);
        z-index: 1;
        -moz-user-select: none;
    }
    
    .hhome-module {
        margin-bottom: 30px;
        color: #4a4a4a;
    }
    
    .module-title {
        margin: 0 20px 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        vertical-align: baseline;
    }
    
    .module-title h2 {
        font-size: 20px;
        font-weight: 300;
        margin: 0;
        padding: 0;
        color: #4a4a4a;
    }
    
    .module-title a {
        color: #b0b0b0;
        font-size: 14px;
        text-decoration: none;
        vertical-align: baseline;
        position: relative;
        padding-right: 10px;
    }
    
    .module-title a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 6px;
        height: 10px;
        background-size: cover;
        background-image: url("/static/img/more.png");
    }
    
    .module-main {
        overflow: hidden;
        padding-bottom: 10px;
        color: #4a4a4a;
    }
    
    .swiper {
        padding-bottom: 40px;
    }

    .hot-city{
        font-weight: 600;
        color: #111;
    }



     .product-list .product-item {
        display: inline-block;
        margin-left: 14px;
        width: 210px;
        /*border: 1px solid black;*/
    }
    .product-list .product-item2{
        width: 150px;
        margin-left: 16px;
    }
    .item-pic {
        margin-bottom: 8px;
        position: relative;
    }
    
    .item-pic img {
        width: 210px;
        height: 158px;
    }

    .item-pic .hot-img{
        width: 150px;
        height: 200px;
    }
    
    .item-text {
        margin: 0;
        font-size: 15px;
        color: #4a4a4a;
        width: 210px;
        height: 48px;
        overflow:hidden;
        margin-bottom: 5px;
        white-space: wrap;
        line-height: 24px;
    }
    
    .info {
        display: flex;
        justify-content: space-between;
        font-size: 16px;
    }
    
    .info p {
        margin: 0;
        font-size: 18px;
        color: #f36700;
    }
    
    .rating img {
        width: 10px;
        height: 10px;
        margin: 0 1px;
    }
    .a-box{
        display: inline-block;
    }
    .hunter-item{
        width:180px;
        height: 317px;
        display: flex;
        flex-direction: column;
        /*justify-content: space-around;*/
        align-items: center;
        border: 1px solid #eee;
        font-size: 16px;
        padding: 27px;
    }
    .hunter-pic img{
        width: 100px;
        height: 100px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
    }
    .hunter-text{
        margin: 0;
        font-size: 15px;
    }
    .hunter-text h4, .hunter-text p{
        margin: 0;
    }
    .hunter-text h4{
        font-weight: 700;
        margin-bottom: 5px;
    }
    .hunter-text p{
        color: #b0b0b0;
        font-size: 11px;
        margin-bottom: 17px;
    }
    .hunter-desc{
        text-align: left;
        font-size: 15px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }
    .tiyan-main{
        padding:0 20px;
        position: relative;
        top: -15px;
    }
    .tiyan-item{
        font-size: 16px;
        line-height: 30px;
        padding: 20px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
    }
    .tiyan-avatar img{
        width: 28px;
        height: 28px;
        border-radius: 50%;
    }
    .tiyan-img img{
        width: 100px;
        height: 100px;
    }
    .tiyan-text{
        padding: 0 25px 25px 5px;
    }
    .tiyan-text p{
        margin: 0;
    }
    .tiyan-left{
        display: flex;
    }
    .tiyan-text p:nth-of-type(1){
        font-size: 12px;
        color: #b0b0b0;
        margin-bottom: 10px;
        position: relative;
        top: -5px;
    }
    .tiyan-text p:nth-of-type(2){
        height: 65px;
        overflow: hidden;
    }
    .tiyan-text p:nth-of-type(2)::after{
        content: '...';
    }
    .no-event{
        pointer-events: none;
    }
    .sellout{
        position: absolute;
        top: 0;
        left:0;
        width: 210px;
        height: 158px;
        background-color: rgba(255, 255, 255, 0.5);
        text-align: center;
    }
    .sellout img{
        width: 100px;
        height: 100px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
</style>